import React from 'react';
import './index.scss';

function MessageList({ data, layout }: any) {
  const { w, h, textSize } = layout;

  const messageListW = Math.ceil(((1760 - 340) * w) / 1760) + 'px';

  const messageListH = Math.ceil((h * 890) / 3840) + 'px';

  const messageMinH = Math.ceil((h * 890) / 3840) + 'px'; // Math.ceil((1760-340) * w / (1760)) / 4 + 'px';

  // 宽度动态计算 高度自适应
  // 基准最大宽 1804
  const messageListItemW = Math.ceil((w * 1804) / 2160);

  // 基准边距 30
  // 3840
  const messageListItemMargin = Math.ceil((h * 30) / 3804);
  const messageRadius = Math.ceil((80 * w) / 2160) + 'px';
  // const messageListMarginBottom = Math.ceil(20 * w / 2160) + 'px';

  const itemStyle = {
    marginBottom: messageListItemMargin + 'px',
    maxWidth: messageListItemW + 'px',
  };

  const assistantRadius = {
    borderTopRightRadius: messageRadius,
    borderBottomLeftRadius: messageRadius,
    borderBottomRightRadius: messageRadius,
  };

  const userRadius = {
    borderTopLeftRadius: messageRadius,
    borderBottomLeftRadius: messageRadius,
    borderBottomRightRadius: messageRadius,
  };

  const messageLineH = Math.ceil((90 * w) / 2160) + 'px';

  // 水平边距
  const messgaePaddingH = Math.ceil((60 * w) / 2160) + 'px';

  // 垂直边距
  const messgaePaddingV = Math.ceil((40 * w) / 2160) + 'px';

  const dialoguePadding = {
    paddingTop: messgaePaddingV,
    paddingBottom: messgaePaddingV,
    paddingLeft: messgaePaddingH,
    paddingRight: messgaePaddingH,
  };

  return (
    <div className="msg_wrapper">
      {/* <div className="messageList" style={{width: messageListW, minHeight: messageMinH, maxHeight: messageListH}}> */}
      <div
        id="messageEnd"
        className="messageList"
        style={{ width: messageListW, minHeight: 50, maxHeight: messageListH, marginLeft: '20px', marginRight: '20px' }}
      >
        {data?.map((item: any) => {
          if (item.type === 'assistant') {
            return (
              <div key={item.content} className="messageListItem messageListItem_assistant" style={{ ...itemStyle }}>
                <pre
                  className="didagent__message didagent__message__assistant"
                  style={{ ...assistantRadius, ...dialoguePadding }}
                >
                  <span className="appear-animation">
                    <span style={{ fontSize: textSize, lineHeight: messageLineH }}>{item.content}</span>
                  </span>
                </pre>
              </div>
            );
          }
          return (
            <div key={item.content} className="messageListItem messageListItem_user" style={itemStyle}>
              <pre className="didagent__message didagent__message__user" style={{ ...dialoguePadding, ...userRadius }}>
                <span className="appear-animation">
                  <span style={{ fontSize: textSize, lineHeight: messageLineH }}>{item.content}</span>
                </span>
              </pre>
            </div>
          );
        })}
        <a name="1" href="#1" style={{ height: 0, overflow: 'hidden' }}>
          &nbsp;
        </a>
        {/* <div className="messageListItem messageListItem_assistant"> */}
        {/*  <pre className="didagent__message didagent__message__assistant"> */}
        {/*    <span className="appear-animation"> */}
        {/*      <span>你好，我是坤坤，有什么可以帮你</span> */}
        {/*    </span> */}
        {/*  </pre> */}
        {/* </div> */}
        {/* <div className="messageListItem messageListItem_user"> */}
        {/*  <pre className="didagent__message didagent__message__user"> */}
        {/*    <span className="appear-animation"> */}
        {/*      <span>你我仿佛</span> */}
        {/*    </span> */}
        {/*  </pre> */}
        {/* </div> */}
        {/* <div className="messageListItem messageListItem_assistant"> */}
        {/*  <pre className="didagent__message didagent__message__assistant"> */}
        {/*    <span className="appear-animation"> */}
        {/*      <span> */}
        {/*        抱歉，我不明白你的意思。你还有其他问题吗？抱歉，我不明白你的意思。你还有其他问题吗？抱歉，我不明白你的意思。你还有其他问题吗？抱歉，我不明白你的意思。你还有其他问题吗？抱歉，我不明白你的意思。你还有其他问题吗？ */}
        {/*      </span> */}
        {/*    </span> */}
        {/*  </pre> */}
        {/* </div> */}
      </div>
    </div>
  );
}

export default MessageList;
